<template>
  <div class="article-list">
    <van-pull-refresh v-model="pullDownLoading" @refresh="onRefresh">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
            <article-item v-for="(article, index) in articles" 
            :key="index"
            :article ="article"
            />
        </van-list>
    </van-pull-refresh>
    
  </div>
</template>

<script>
import { getArticles } from '@/api/article.js'
import ArticleItem from '@/components/article-item'

export default {
    name: 'ArticleList',
    components: {
      ArticleItem,
    },
    props: {
        channel: {
            type: Object,
            require:true
        }
    },
    data(){
        return {
            articles: [],
            loading: false,
            finished: false,
            timestamp: null,

            // 控制下拉加载状态的
            pullDownLoading: false
        }
    },
    methods: {
        async onLoad() {
          console.log('onload执行了');
          console.log('时间戳'+ Date.now());
          // 异步更新数据
          // setTimeout 仅做示例，真实场景中一般为 ajax 请求
          //请求获取数据
          const { data } = await getArticles({
            channel_id: 0,
            timestamp:  this.timestamp || Date.now(),
            with_top: 1
          })
          console.log(data);
          //把数据放在数组中
          const { results } = data.data
          this.articles.push(...results)
          //设置本次加载状态结束 ，他才可以判断是否需要加载下一次  否则就会永远的留在这里
          // 加载状态结束
          this.loading = false;
          // 数据全部加载完成
          if(results.length){
              this.timestamp = data.data.pre_timestamp
          }else{
              this.finished = true
          }
        //   this.finished = true;
  
        //   setTimeout(() => {
        //     for (let i = 0; i < 10; i++) {
        //       this.list.push(this.list.length + 1);
        //     }


            
        //     if (this.list.length >= 40) {
              
        //   }, 1000);
        },
        async onRefresh() {
            //下拉刷新就会自己展示loding状态
            // 请求获取数据
          const { data } = await getArticles({
            channel_id: 0,
            timestamp: Date.now(),
            with_top: 1
          })
            //把数据push到数组
            const { results } = data.data
          this.articles.unshift(...results)

            //g关闭刷新的状态
            this.pullDownLoading = false
        },
    }
}
</script>

<style lang="less" scoped>
    .article-list{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 50px;
        top:99px;
        overflow-y: auto;
    }
</style>